<template>
  <div id="wrapper">
    <div class="bgbox">
      <div class="headerbox" style="-webkit-app-region: drag">
        <!-- <i class="el-icon-warning-outline" @click="handLoginOut"></i> -->
        <i class="el-icon-plus" @click="handclicadd"></i>
        <i class="el-icon-minus" @click="handclickmin"></i>
        <i class="el-icon-close" @click="handLoginOut"></i>
      </div>
      <div class="selctebarbox"  v-if="getuserInfo">
        <div class="left">
          <img :src="imgurl+getuserInfo.imgurl" alt="userimage" />
        </div>
        <div class="right" >
          <div class="head">{{getuserInfo.name}}</div>
          <p>{{getuserInfo.email}}</p>
        </div>
      </div>
    </div>
    <div class="conbox">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="好友" name="first">
          <el-scrollbar  style="height: 422px;">
            <ul>
              <li @click="chatFrend(item)" v-for="(item,index) in friendList" :key="index">
                <div class="leftlxl">
                  <img :src="imgurl+item.imgurl" alt="头像" />
                </div>
                <div class="center">
                  <div>{{item.name}}</div>
                  <p>你好啊你好</p>
                </div>
                <div class="rightlxl">
                  <span>4-16</span>
                </div>
              </li>
            </ul>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="群聊" name="second">
          <el-scrollbar style="height: 422px;">
            <ul>
              <li @click="groupclick(item)" v-for="(item,index) in groutList" :key="index">
                <div class="leftlxl">
                  <img :src="imgurl+item.imgurl" alt="头像" />
                </div>
                <div class="center">
                  <p class="miaoshubox">{{item.notice}}</p>
                </div>
                <div class="rightlxl">
                  <span>4-16</span>
                </div>
              </li>
            </ul>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import SystemInformation from "../components/LandingPage/SystemInformation";
// import socket from '../socket';
import { commonMixin } from "../config/mixin";
import { mapGetters, mapActions } from "vuex";
import API from "../api/api";
import serverUrl from '../config/client'
export default {
  name: "index",
  mixins: [commonMixin],
  components: { SystemInformation },
  created(){
      this.imgurl = serverUrl
  },
  data() {
    return {
      activeName: "first",
      browserWindowProxy: null,
      editorText: "",
      content: "",
      imgurl:'',
      friendList:[], //好友列表
      groutList:[], //群列表
    };
  },
  computed: {
    ...mapGetters(["getuserInfo", "showlogin"])
  },
  watch: {
    getuserInfo: {
      handler(curVal, oldVal) {
        // console.log(curVal);
        this.findFrendList();
      },
      deep: true
    }
  },
  mounted() {
    if (!this.showlogin) {
      this.$electron.ipcRenderer.send("creat-child-window", {
        url: "#/login",
        type: "min"
      });

      this.$electron.ipcRenderer.send("window-hide");
    }else {
      this.findFrendList();
      this.getGroupList();
    }
    
  },
  methods: {
    handleClick(tab, event){
      if(tab.name =="second"){
        this.getGroupList();
      }
      // console.log(tab)
    },
    async getGroupList(){
      var result = await API.getGroupList({})
      if(result.status==200){
        this.groutList = result.data;
      }else {
        this.$message({
          type:'warning',
          message:result.msg
        })
      }
      
    },
    //登出
    handLoginOut(){
      // dialog.showMessageBoxSync
      var result = this.$electron.remote.dialog.showMessageBox({ 
        title:'提示',
        buttons:['确定'],
        type:'warning',
        message:'确定登出？',
        cancelId:2,
        noLink:true
       })
       if(result==0){
          // this.$electron.ipcRenderer.send("creat-child-window", {
          //   url: "#/login",
          //   type: "min"
          // });

          // this.$electron.ipcRenderer.send("window-hide");

          this.$store.dispatch("setUserInfo", null);
          this.$store.dispatch("upLoginState", false);
          this.handclickclose();
          
       }
    },
    async findFrendList() {
		var userID = this.getuserInfo.id;
		var result = await API.findFrendList({
			userID
		});
		if(result.status==200){
			this.friendList = result.data;
		}else {
			this.$message({
				type:'warning',
				message:result.msg
			})
		}
    },
    groupclick(item) {
      this.$electron.ipcRenderer.send("creat-child-window", {
        url: "#/group",
        type: "max"
      });
    },
    insertHtml() {
      // var node = document.getElementsByClassName("selctebarbox")[0]
      // this.$refs.chatInput.insertHtmlAtCaret("<button>按钮</button>")
      this.$electron.ipcRenderer.send("window-screenShot");
    },
    chatFrend(item) {
      this.$electron.ipcRenderer.send("creat-child-window", {
        url: "#/frend?id="+encodeURI(encodeURI(item.id))+"&name="+ encodeURI(encodeURI(item.name)),
        type: "max"
      });
    },
    changeinput(v) {},
    open(link) {
      this.openExternal(link);
    },
    //添加好友
    handclicadd() {
      this.$electron.ipcRenderer.send("creat-child-window", {
        url: "#/addFrend",
        type: "max"
      });
    },
    handclickmin() {
      this.$electron.ipcRenderer.send("window-min");
    },
    handclickclose() {
      this.$electron.ipcRenderer.send("window-close");
    },
    
  }
};
</script>

<style lang='scss' scoped>
#wrapper {
  width: 100%;
  height: 100%;
  .bgbox {
    background: url("../assets/images/th.jpg") no-repeat;
    background-size: 100% 100%;
  }
  .headerbox {
    height: 30px;
    line-height: 30px;
    text-align: right;
    cursor: pointer;
    padding: 0 10px;
    .el-icon-minus {
      margin-right: 10px;
    }
    i {
      font-size: 20px;
      -webkit-app-region: no-drag;
    }
  }
  .selctebarbox {
    overflow: hidden;
    padding: 15px 10px;
    .left {
      float: left;
      img {
        width: 80px;
        height: auto;
        border-radius: 40px;
        cursor: pointer;
      }
    }
    .right {
      margin-left: 12px;
      float: left;
      .head {
        font-weight: bold;
      }
      p {
        font-size: 12px;
      }
    }
  }
  .conbox {
    padding: 0 10px;
    .el-tabs__content {
      .el-tab-pane {
        ul {
          margin: 0;
          padding: 0;
          // overflow-x: hidden;
          // overflow-y: auto;

          li {
            width: 100%;
            overflow: hidden;
            list-style: none;
            border-bottom: 1px solid #eee;
            .leftlxl {
              float: left;
              img {
                width: auto;
                height: 50px;
                border-radius: 25px;
              }
            }
            .center {
              box-sizing: border-box;
              float: left;
              width: 180px;
              padding-left: 10px;
              padding-top: 5px;
              p {
                margin: 6px 0;
                font-size: 12px;
                color: #999;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .miaoshubox {
                margin: 10px 0;
                font-size: 14px;
                color: #333;
              }
            }
            .rightlxl {
              width: 44px;
              float: left;
              text-align: center;
              span {
                height: 50px;
                line-height: 50px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
